<!DOCTYPE html>
<html lang="zh">

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0,shrink-to-fit=no, viewport-fit=cover">
    <meta name="keywords" content="蓝桥到家">
    <meta name="description" itemprop="description" content="生鲜副食、饮品乳品、鲜花蛋糕">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商家详情</title>
    <link rel="stylesheet" type="text/css" href="../styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="../styles/iconfont/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../styles/shop.css" />
    <link rel="stylesheet" type="text/css" href="../styles/common.css" />
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript" src="../js/zepto.min.js"></script>
</head>

<body>
<div class="wrap">
    <!-- 头部 start -->
    <header class="header_bar">
        <a href="../index.html">
            <div class="header_bar_back"></div>
        </a>
        <div class="header_bar_title">商家主页</div>
    </header>
    <!-- 头部 end -->
    <!-- 商家主页-头部 start -->
    <div class="shop_info">
        <div class="logo">
            <img src="../images/shop/yh.jpg" alt="">
        </div>
        <div class="title">
            <h2>
                <span>永辉超市-搜秀城店</span>
                <i class="iconfont icon-yousanjiao"></i>
            </h2>
            <div class="discount">
                <div>
                    <span class="special">满减</span>
                    <span class="dis_active">满99减98，满199减198</span>
                </div>
            </div>
        </div>
    </div>
    <!-- 商家主页-头部 end -->
    <div class="container">
        <!-- 商品列表 start -->
        <div class="goods">
            <div class="left">
                <ul>
                    <li class="cur">
                        <span><a href="#A">限量秒杀</a></span>
                    </li>
                    <li>
                        <span><a href="#B">品牌直降</a></span>
                    </li>
                    <li>
                        <span><a href="#C">情满中秋</a></span>
                    </li>
                </ul>
            </div>
            <div class="right" onscroll="toscroll()" id="app">
                <ul>
                    <li id="A">
                        <h1 class="goodTitle">限量秒杀</h1>
                        <dl>
                            <dd class="good_item" v-for="good in goods.slice(0,4)" :key="good.id">
                                <img :src="good.image" alt="">
                                <section class="info">
                                    <p class="name">{{ good.name }}</p>
                                    <p class="desc">优质商品</p>
                                    <p class="sale">
                                        <span>月售100+</span>
                                        <span>好评率96%</span>
                                    </p>
                                    <div class="more">
                                        <div class="price">
                                            <span>￥</span> {{ good.price }}
                                        </div>
                                        <div class="action">
                                            <span class="iconfont icon-jian" @click="decreaseCount(good.id)"></span>
                                            <span class="num">{{ good.count }}</span>
                                            <span class="iconfont icon-jia" @click="increaseCount(good.id)"></span>
                                        </div>
                                    </div>
                                </section>
                            </dd>
                        </dl>
                    </li>
                    <li id="B">
                        <h1 class="goodTitle">品牌直降</h1>
                        <dl>
                            <dd class="good_item" v-for="good in goods.slice(4,8)" :key="good.id">
                                <img :src="good.image" alt="">
                                <section class="info">
                                    <p class="name">{{ good.name }}</p>
                                    <p class="desc">优质商品</p>
                                    <p class="sale">
                                        <span>月售100+</span>
                                        <span>好评率96%</span>
                                    </p>
                                    <div class="more">
                                        <div class="price">
                                            <span>￥</span> {{ good.price }}
                                        </div>
                                        <div class="action">
                                            <span class="iconfont icon-jian" @click="decreaseCount(good.id)"></span>
                                            <span class="num">{{ good.count }}</span>
                                            <span class="iconfont icon-jia" @click="increaseCount(good.id)"></span>
                                        </div>
                                    </div>
                                </section>
                            </dd>
                        </dl>
                    </li>
                    <li id="C">
                        <h1 class="goodTitle">情满中秋</h1>
                        <dl>
                            <dd class="good_item" v-for="good in goods.slice(8,14)" :key="good.id">
                                <img :src="good.image" alt="">
                                <section class="info">
                                    <p class="name">{{ good.name }}</p>
                                    <p class="desc">优质商品</p>
                                    <p class="sale">
                                        <span>月售100+</span>
                                        <span>好评率96%</span>
                                    </p>
                                    <div class="more">
                                        <div class="price">
                                            <span>￥</span> {{ good.price }}
                                        </div>
                                        <div class="action">
                                            <span class="iconfont icon-jian" @click="decreaseCount(good.id)"></span>
                                            <span class="num">{{ good.count }}</span>
                                            <span class="iconfont icon-jia" @click="increaseCount(good.id)"></span>
                                        </div>
                                    </div>
                                </section>
                            </dd>
                        </dl>
                    </li>


                </ul>
            </div>
        </div>
        <!-- 商品列表 end -->
    </div>
</div>
<!--去结算 start-->
<div class="cart">
    <div class="cart_info">
        <div class="carlogo">
            <span class="iconfont icon-gouwuche">   <i class="count">0</i></span>

        </div>
        <div class="price">
            <div class="noShop">
                <p style="color: #fff;font-size: 0.3rem;">总计：0.00 元</p>
            </div>
        </div>
        <div class="account" onclick="location.href='./order-confirm.html'">去结算</div>
    </div>
    <!--去结算 end-->
    <script>
        // 创建Vue实例
        var app = new Vue({
            el: '#app',
            data: {
                goods: [
                    { id: 1, name: '千禧西红柿(500g)', price: 6.9, image: '../images/goods/qx.jpg', count: 0 },
                    { id: 2, name: '龙须挂面1kg', price: 7.9, image: '../images/goods/gm.jpg', count: 0 },
                    { id: 3, name: '收纳盒(喜得龙)', price: 16.9, image: '../images/goods/snh.jpg', count: 0 },
                    { id: 4, name: '消毒湿巾', price: 4.9, image: '../images/goods/sj.jpeg', count: 0 },
                    { id: 5, name: '鸡蛋9枚', price: 6.5, image: '../images/goods/jd.jpg', count: 0 },
                    { id: 6, name: '鲍鱼约30g', price: 3.9, image: '../images/goods/by.jpg', count: 0 },
                    { id: 7, name: '可口可乐(2L)', price: 6.5, image: '../images/goods/kl.jpg', count: 0 },
                    { id: 8, name: '芹菜(500g)', price: 6.9, image: '../images/goods/qc.jpg', count: 0 },
                    { id: 9, name: '阳澄湖大闸蟹(538型)', price: 666, image: '../images/goods/dzx.jpg', count: 0 },
                    { id: 10, name: '阳澄湖大闸蟹(313型)', price: 999, image: '../images/goods/dzx.jpg', count: 0 },
                    { id: 11, name: '阳澄湖大闸蟹(888型)', price: 708, image: '../images/goods/dzx.jpg', count: 0 },
                    { id: 12, name: '阳澄湖大闸蟹(1188型)', price: 948, image: '../images/goods/dzx.jpg', count: 0 },
                    { id: 13, name: '稻香村月饼礼盒(A型)', price: 108, image: '../images/goods/dxc.jpg', count: 0 },
                    { id: 14, name: '稻香村月饼礼盒(B型)', price: 98, image: '../images/goods/dxc.jpg', count: 0 }
                ],
                cart: []
            },
            methods: {
                // 增加商品数量
                increaseCount: function(id) {
                    var good = this.goods.find(item => item.id === id);
                    if (good) {
                        good.count++;
                        this.addToCart(id);
                    }
                },
                // 减少商品数量
                decreaseCount: function(id) {
                    var good = this.goods.find(item => item.id === id);
                    if (good && good.count > 0) {
                        good.count--;
                        this.addToCart(id);
                    }
                },
                // 添加商品到购物车
                addToCart: function(id) {
                    var good = this.goods.find(item => item.id === id);
                    if (good) {
                        // 检查购物车中是否已存在该商品
                        var cartItemIndex = this.cart.findIndex(item => item.id === id);
                        if (cartItemIndex !== -1) {
                            if (good.count > 0) {
                                this.cart[cartItemIndex].count = good.count;
                                this.cart[cartItemIndex].quantity = good.count; // 同步quantity属性
                            } else {
                                this.cart.splice(cartItemIndex, 1);
                            }
                        } else if (good.count > 0) {
                            // 添加商品到购物车，同时设置quantity属性
                            this.cart.push({
                                ...good,
                                quantity: good.count
                            });
                        }
                        // 更新购物车小红点
                        this.updateCartBadge();
                    }
                },
                // 更新购物车小红点
                updateCartBadge: function() {
                    var totalCount = this.cart.reduce((sum, item) => sum + item.count, 0);
                    // 更新页面上的购物车小红点
                    document.querySelector('.carlogo .count').textContent = totalCount;
                    // 更新总计价格
                    var totalPrice = this.cart.reduce((sum, item) => sum + (item.price * item.count), 0);
                    document.querySelector('.price .noShop p').textContent = '总计：' + totalPrice.toFixed(2) + ' 元';
                    // 确保购物车数据中的price和quantity是有效数字
                    const cleanCart = this.cart.map(item => ({
                        ...item,
                        price: parseFloat(item.price),
                        quantity: parseInt(item.count, 10) // 确保quantity始终等于count
                    }));
                    // 存储到localStorage以便在其他页面访问
                    localStorage.setItem('cartCount', totalCount);
                    localStorage.setItem('cart', JSON.stringify(cleanCart));
                }
            },
            mounted: function() {
                // 从localStorage加载购物车数据
                const savedCartItems = localStorage.getItem('cart');
                if (savedCartItems) {
                    this.cart = JSON.parse(savedCartItems);
                    // 更新商品数量
                    this.cart.forEach(cartItem => {
                        const good = this.goods.find(item => item.id === cartItem.id);
                        if (good) {
                            good.count = cartItem.count;
                        }
                    });
                }
                // 更新购物车小红点
                this.updateCartBadge();
            }
        })
    </script>
</body>

<script>
    //数量加减
    function changenum(numid, action) {
        let numitem = $('#' + numid);
        if (action == 'reduce') {
            numitem.text(parseInt(numitem.text()) == 0 ? 0 : (parseInt(numitem.text())) - 1);
        } else {
            numitem.text((parseInt(numitem.text())) + 1);
        }
    }
    //右侧滑动
    function toscroll() {
        var titles = $('.goodTitle');
        for (var i = 0; i < titles.length; i++) {
            var style = titles[i].getBoundingClientRect();
            if (style.top == 182) {
                $($(".left ul li")[i]).addClass('cur').siblings().removeClass('cur');
            }
        }
    }
</script>

</html>